<template>
    <page-decorator>
        <div class="row">
            <div class="col-lg-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-content">
                        <vue-form-item label="公众号选择" :error-message="errors.first('WeChat')">
                            <div class="i-checks" style="display: inline-block;margin-right: 20px"
                                 v-for="(item,key)  in $store.state.weChat_name">
                                <checkbox style="font-size: 1rem;"
                                          :value="key"
                                          v-model="WeChat"
                                >{{ item }}
                                </checkbox>
                            </div>
                        </vue-form-item>
                        <div class="hr-line-dashed"></div>
                        <vue-form-item label="类型" :error-message=" errors.first('type')">
                            <input-radio v-model:value="type"
                                         v-validate="'required'"
                                         label="类型" :options="$store.state.replyTypeList"
                                         @tapEvent="linkTap"
                                         el-name="type"></input-radio>
                        </vue-form-item>
                        <div class="hr-line-dashed"></div>
                        <vue-form-item label="群发内容" v-if="type==1" :error-message=" errors.first('content')">
                        <textarea class="form-control" v-model="content"
                                  label="群发内容"
                                  el-name="content">
                        </textarea>
                        </vue-form-item>
                        <vue-form-item label="素材ID" v-if="type!=1" :error-message=" errors.first('source_id')">
                            <div class="input-group">
                                <input class="form-control" type="text"
                                       v-model="source_id"
                                       readonly="readonly"
                                />
                                <div class="input-group-btn">
                                    <button class="btn btn-primary" id="media_id"
                                            v-on:click="openSelectDialog()"
                                    >
                                        <i class="fa fa-external-link"></i> 选择素材
                                    </button>
                                </div>
                            </div>
                        </vue-form-item>
                        <div class="hr-line-dashed"></div>
                        <div class="text-center">
                            <button class="btn btn-primary" v-on:click="saveModel()" style="width: 300px">发送</button>
                        </div>
                    </div>
                </div>
                <modal v-if="imgSelect"
                       @cancel="closeImgDialog"
                       @ok="saveImgDialog"
                       modal-title="素材选择"
                       elId="picture"
                       model-size="large">

                    <!--<template slot="header">-->
                    <!---->
                    <!--</template>-->
                    <div class="row">
                        <div class="col-lg-12" v-show="!SourceLoading">
                            <div class="ibox float-e-margins">
                                <div class="ibox-title" style="  border-width: 0px;">
                                    <h5>素材列表</h5>

                                    <div class="ibox-tools">
                                        <!--<button data-toggle="dropdown" class="btn btn-primary btn-sm dropdown-toggle">{{TypeArr[SourceType]}} <span class="caret"></span></button>-->
                                        <!--<ul class="dropdown-menu m-t-xs">-->
                                        <!--<li v-for="(item,key) in TypeArr" v-on:click="changType(key)" ><a href="javascript:;">{{item}}</a></li>-->
                                        <!--</ul>-->
                                    </div>
                                </div>
                                <div class="ibox-content">
                                    <masonry-table v-show="typeChange==2" :data-source="tableImgList">

                                        <template slot="body" slot-scope="prop">
                                            <div class="col-md-2">
                                                <div class="ibox">
                                                    <div class="ibox-content product-box"
                                                         v-bind:class="prop.item.id=== SourceSelect?'active':''"
                                                         v-on:click="changeSource(prop.item.id)"
                                                    >
                                                        <div class="product-imitation center-block">
                                                            <img alt="图片" class="img-rounded img-lg center-block"
                                                                 :title="prop.item.imgName" :src="prop.item.imgPath">
                                                        </div>
                                                        <div class="product-desc ">
                                                            <!--<span class="product-price">-->
                                                            <!--{{prop.item.imgName}}-->
                                                            <!--</span>-->
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </template>
                                    </masonry-table>
                                    <masonry-table v-show="typeChange==3" :data-source="tableSourceList">
                                        <template slot="body" slot-scope="props">
                                            <div class="col-md-2">
                                                <div class="ibox">
                                                    <div class="ibox-content product-box"
                                                         v-bind:class="props.item.id=== SourceSelect?'active':''"
                                                         v-on:click="changeSource(props.item.id)"
                                                    >
                                                        <div class="product-imitation center-block">
                                                            <img alt="图片" class="img-rounded img-lg center-block"
                                                                 :src="urlCheck(props.item.contexts[0].thumb_url)">
                                                        </div>
                                                        <div class="product-desc ">
                        <span class="product-price content-title">
                       {{props.item.contexts[0].title}}
                        </span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </template>
                                    </masonry-table>
                                    <masonry-table v-show="typeChange==4" :data-source="tableVoiceSourceList">
                                        <template slot="body"  slot-scope="props">
                                            <div class="col-md-3"  >
                                                <div class="ibox">
                                                    <div class="ibox-content product-box"
                                                         v-bind:class="props.item.id=== SourceSelect?'active':''"
                                                         v-on:click="changeSource(props.item.id)"
                                                    >
                                                        <div class="product-imitation center-block">
                                                            <i class="fa fa-play-circle" style="width: 80px;height: 80px"></i>
                                                        </div>
                                                        <div class="product-desc ">
                        <span class="product-price content-title">
                       {{props.item.voiceName}}
                        </span>
                                                            <!--<small class="text-muted">Category</small>-->
                                                            <!--<a href="javascript:;"  class="product-name"> {{props.item.imgName}}</a>-->
                                                            <!--<div class="small m-t-xs" v-for="(context,key) in props.item.contexts">-->
                                                            <!--<div class="row" v-if="key != 0">-->
                                                            <!--<div class="col-xs-8 ">-->
                                                            <!--<h4 class="content-title" >{{context.title}}</h4>-->
                                                            <!--</div>-->
                                                            <!--<div class="col-xs-4">-->
                                                            <!--<img class="img-responsive" :src="context.thumb_url ">-->
                                                            <!--&lt;!&ndash;<i class="default">缩略图</i>&ndash;&gt;-->
                                                            <!--</div>-->
                                                            <!--</div>-->
                                                            <!--</div>-->
                                                        </div>
                                                        <!--<div class="col-xs-6 col-sm-3 col-md-3 panel-group">-->
                                                        <!--<div class="panel panel-default" v-for="(context,key) in props.item.contexts">-->
                                                        <!--<div class="panel-body" v-if="key == 0">-->
                                                        <!--<div class="img">-->
                                                        <!--<i class="default">封面图片</i>-->
                                                        <!--<img :src="context.thumb_url ">-->
                                                        <!--<span class="text-left">{{context.title}}</span>-->
                                                        <!--</div>-->
                                                        <!--</div>-->
                                                        <!--<div class="panel-body" v-if="key != 0">-->
                                                        <!--<div class="text">-->
                                                        <!--<h4>{{context.title}}</h4>-->
                                                        <!--</div>-->
                                                        <!--<div class="img">-->
                                                        <!--<img :src="context.thumb_url ">-->
                                                        <!--<i class="default">缩略图</i>-->
                                                        <!--</div>-->
                                                        <!--</div>-->
                                                        <!--</div>-->
                                                        <!--</div>-->
                                                        <!--<div class="m-t text-righ">-->
                                                        <!--<button type="button" v-on:click="showEditDialog(props.item.id)" class="btn btn-xs btn-outline btn-primary"><i class="fa fa-pencil"></i> 更名</button>-->

                                                        <!--<button type="button" v-on:click="showDeleteDialog(props.item.id)" class="btn btn-xs btn-outline btn-primary"><i class="fa fa-trash"></i> 删除</button>-->
                                                        <!--</div>-->
                                                    </div>
                                                </div>
                                            </div>
                                        </template>
                                    </masonry-table>
                                    <masonry-table v-show="typeChange==5" :data-source="tableVideoSourceList">
                                        <template slot="body"  slot-scope="props">
                                            <div class="col-md-2"  >
                                                <div class="ibox">
                                                    <div class="ibox-content product-box"
                                                         v-bind:class="props.item.id=== SourceSelect?'active':''"
                                                         v-on:click="changeSource(props.item.id)"
                                                    >
                                                        <div class="product-imitation center-block">
                                                            <video :src="props.item.videoPath"></video>
                                                        </div>
                                                        <div class="product-desc ">
                        <span class="product-price content-title">
                       {{props.item.videoTitle}}
                        </span>
                                                            <!--<small class="text-muted">Category</small>-->
                                                            <!--<a href="javascript:;"  class="product-name"> {{props.item.imgName}}</a>-->
                                                            <!--<div class="small m-t-xs" v-for="(context,key) in props.item.contexts">-->
                                                            <!--<div class="row" v-if="key != 0">-->
                                                            <!--<div class="col-xs-8 ">-->
                                                            <!--<h4 class="content-title" >{{context.title}}</h4>-->
                                                            <!--</div>-->
                                                            <!--<div class="col-xs-4">-->
                                                            <!--<img class="img-responsive" :src="context.thumb_url ">-->
                                                            <!--&lt;!&ndash;<i class="default">缩略图</i>&ndash;&gt;-->
                                                            <!--</div>-->
                                                            <!--</div>-->
                                                            <!--</div>-->
                                                        </div>
                                                        <!--<div class="col-xs-6 col-sm-3 col-md-3 panel-group">-->
                                                        <!--<div class="panel panel-default" v-for="(context,key) in props.item.contexts">-->
                                                        <!--<div class="panel-body" v-if="key == 0">-->
                                                        <!--<div class="img">-->
                                                        <!--<i class="default">封面图片</i>-->
                                                        <!--<img :src="context.thumb_url ">-->
                                                        <!--<span class="text-left">{{context.title}}</span>-->
                                                        <!--</div>-->
                                                        <!--</div>-->
                                                        <!--<div class="panel-body" v-if="key != 0">-->
                                                        <!--<div class="text">-->
                                                        <!--<h4>{{context.title}}</h4>-->
                                                        <!--</div>-->
                                                        <!--<div class="img">-->
                                                        <!--<img :src="context.thumb_url ">-->
                                                        <!--<i class="default">缩略图</i>-->
                                                        <!--</div>-->
                                                        <!--</div>-->
                                                        <!--</div>-->
                                                        <!--</div>-->
                                                        <!--<div class="m-t text-righ">-->
                                                        <!--<button type="button" v-on:click="showEditDialog(props.item.id)" class="btn btn-xs btn-outline btn-primary"><i class="fa fa-pencil"></i> 更名</button>-->

                                                        <!--<button type="button" v-on:click="showDeleteDialog(props.item.id)" class="btn btn-xs btn-outline btn-primary"><i class="fa fa-trash"></i> 删除</button>-->
                                                        <!--</div>-->
                                                    </div>
                                                </div>
                                            </div>
                                        </template>
                                    </masonry-table>

                                </div>
                            </div>
                        </div>
                        <div class="col-xs-12" v-show="SourceLoading">
                            <div class="spiner-example" >
                                <div class="sk-spinner sk-spinner-cube-grid">
                                    <div class="sk-cube"></div>
                                    <div class="sk-cube"></div>
                                    <div class="sk-cube"></div>
                                    <div class="sk-cube"></div>
                                    <div class="sk-cube"></div>
                                    <div class="sk-cube"></div>
                                    <div class="sk-cube"></div>
                                    <div class="sk-cube"></div>
                                    <div class="sk-cube"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </modal>
            </div>
        </div>
    </page-decorator>
</template>
<script>
    export default {
        data: function () {
            return {
                list: this.$listDataSource({
                    url: '/api/WeChat/WeChatImg',
                }),
                SourceList: this.$listDataSource({
                    url: '/api/WeChat/WeChatArt',
                }),
                VoiceList: this.$listDataSource({
                    url: '/api/WeChat/WeChatVoice',
                }),
                VideoList: this.$listDataSource({
                    url: '/api/WeChat/WeChatVideo',
                }),
                imgSelect: false,
                refreshImgList: true,
                refreshSourceList: true,
                refreshVoiceSourceList:true,
                refreshVideoSourceList:true,
                SourceSelect: '',
                WeChat: [],
                source_id: '',
                content: '',
                loading:true,
                SourceLoading:false,
                type: 1,
            };
        },
        methods: {
            linkTap:function () {
                this.content='';
                this.source_id='';
            },
            urlCheck:function (url) {
                if(url){
                    return url
                }else{
                    return 'http://tjise.daxuefun.cn/images/failed.png'
                }
            },
            closeDialog: function () {
                this.stateManager.SeeDialogVisible = false;
                this.stateManager.SeeModelId = 0;
            },
            saveModel: function () {
//                ladda.start();
                let self = this;
                self.validate(function () {
                    axios.post('/wechat/sendMass', {
                        'weChats': self.WeChat,
                        'type': self.type,
                        'content': self.content,
                        'source_id': self.source_id,
                    }).then(function (res) {
                        self.source_id='';
                        self.content='';
                        self.type=1;
                        self.WeChat=[];
                        toastr.success('发送成功');
                    }).catch(function (res) {
                        console.log(res.data);
                        toastr.error('群发失败或群发次数已用完');
                    })
                })
            },
            validate: function (successCallback, failedCallback) {
                this.$validator.validateAll().then(() => {
                    // eslint-disable-next-line
                    console.log('验证通过');
                    typeof successCallback === 'function' && successCallback();
                }).catch(() => {
                    // eslint-disable-next-line
                    console.log('验证未通过');
                    typeof failedCallback === 'function' && failedCallback();
                });

            },
            changeSource(id) {
                this.SourceSelect = id;
            },
            openSelectDialog: function () {
                this.imgSelect = true;
            },
            closeImgDialog: function () {
                if(this.SourceLoading ==false){
                    this.imgSelect = false;
                    this.SourceSelect = '';
                }
            },
            saveImgDialog: function () {
                this.SourceLoading =true;
                let self = this;
                self.source_id = self.SourceSelect;
                this.imgSelect = false;
                this.SourceLoading =false;
            },
        },
        created: function () {
            this.$store.commit('setTitle', '群发消息');
        },
        computed: {
            tableImgList() {
                if (this.refreshImgList) {
                    // console.log(this.SourceType)
                    this.list.fetch();
                    this.refreshImgList = false;
                }
                return this.list;
            },
            tableSourceList() {
                if (this.refreshSourceList) {
                    // console.log(this.SourceType)
                    this.SourceList.fetch();
                    this.refreshSourceList = false;
                }
                return this.SourceList;
            },
            tableVoiceSourceList() {
                if (this.refreshVoiceSourceList) {
                    // console.log(this.SourceType)
                    this.VoiceList.fetch();
                    this.refreshVoiceSourceList = false;
                }
                return this.VoiceList;
            },
            typeChange(){
                if(this.type){
                    this.source_id='';
                    this.content='';
                }
                return this.type;
            },
            tableVideoSourceList() {
                if (this.refreshVideoSourceList) {
                    // console.log(this.SourceType)
                    this.VideoList.fetch();
                    this.refreshVideoSourceList = false;
                }
                return this.VideoList;
            },
        }
    }
</script>
<style scoped>
    .content-title {
        max-width: 80%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .product-imitation {
        padding: 0px;
    }

    .product-desc {
        padding: 0px;

    }
    video{
        width: 100% !important;
        height:80px !important;
    }
</style>